<template>
  <div class="box">
    <!-- 标题 -->
    <div class="title">
      <div class="title_fan">
        <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      </div>
      <!-- 会员 -->
      <div class="vip_info">
        <label for="uploadImg">
          <input
            @change="uploadImgFun"
            id="uploadImg"
            type="file"
            accept="image/png,image/gif,image/jpeg"
            class="inputImg"/>
          <img src="../../../../assets/static/myInfo/a4.png" alt="">
        </label>
        <div>
          <span>0积分 奖励中心会员</span><span class="el-icon-arrow-right"></span>
        </div>
      </div>
      <!-- input 输入框 -->
      <div class="title_cen">
        <!-- 账户 -->
        <div>
          <div class="card_title">
            <img src="../../../../assets/static/recharge/q4.png" alt=""/>
            <div>姓名</div>
          </div>
          <div class="consume_input consume_input_one">
            <input @change="changeMyInfo" v-model="info.nickname" placeholder="asfjkopajf "/>
          </div>
        </div>
        <!-- 手机号 -->
        <div>
          <div class="card_title">
            <img src="../../../../assets/static/recharge/q4.png" alt=""/>
            <div>手机号码</div>
          </div>
          <div class="consume_input consume_input_lia">
            <span>+86</span>
            <div class="mobile-content row-wrapper">
              <span>{{ info.mobile }}</span>
            </div>
            <!--            <input @change="changeMyInfo" v-model="info.mobile" placeholder=""/>-->
          </div>
        </div>
        <!-- 用户地址 -->
        <div>
          <div class="card_title">
            <img src="../../../../assets/static/recharge/q4.png" alt=""/>
            <div>用户地址</div>
          </div>
          <div class="consume_input">
            <input @change="changeMyInfo" v-model="info.address" placeholder="请输入"/>
          </div>
        </div>
        <!--  -->
        <div>
          <div class="card_title">
            <img src="../../../../assets/static/recharge/q4.png" alt=""/>
            <div>电子邮件地址</div>
          </div>
          <div class="consume_input consume_input_lia consume_input_rimg">
            <input @change="changeMyInfo" v-model="info.email" placeholder="请输入"/>
            <img src="../../../../assets/static/myInfo/a2.png" alt="">
          </div>
        </div>
        <!-- 文字 -->
        <div class="title_cen_size">
          <div>我们已经将电子发送到本邮箱地址，没有收到邮件吗?</div>
          <div>再次发送验证邮件</div>
          <div>用户档案</div>
          <div>添加商务档案</div>
          <div>更好地管理你的出行费用</div>
        </div>
      </div>
    </div>
    <!-- 关联账户 -->
    <div class="relevance">
      <div class="card_title">
        <img src="../../../../assets/static/recharge/q4.png" alt=""/>
        <div>关联账户</div>
      </div>
      <div class="transfer_card">
        <div>
          <img src="../../../../assets/static/transfer/t0.jpg">
          <span>facebook</span>
        </div>
        <div>
          <img src="../../../../assets/static/transfer/t0.jpg">
          <span>facebook</span>
        </div>
      </div>
    </div>
    <!-- 退出 -->
    <div class="exit">退出</div>
  </div>
</template>

<script>
import {myInfo, changeMyInfo} from '@/api/merbership/my'
import {uploadImg} from '@/api/merbership/upload'
import '@/styles/flax.css'

export default {
  data() {
    return {
      info: {
        nickname: '',
        mobile: '',
        address: '',
        email: ''
      }
    }
  },
  mounted() {
    this.myInfo()
  },
  methods: {
    /**
     * 上传图片
     * @param e
     */
    uploadImgFun(e) {
      console.log(e.target.files[0])
      let params = new FormData()
      params.append('image', e.target.files[0])
      this.uploadImg(params)
    },
    // ----------------- axios --------------------
    /**
     * 上传图片
     * @param pd
     */
    uploadImg(pd) {
      uploadImg(pd)
        .then(res => {
          this.$message.success(res.data.msg)
        })
    },
    /**
     * 我的信息
     */
    myInfo() {
      const pd = {}
      myInfo(pd)
        .then(res => {
          this.info = res.data.data
        })
    },
    /**
     * 修改我的信息
     */
    changeMyInfo() {
      changeMyInfo(this.$qs.stringify(this.info))
        .then(res => {
          this.$message.success(res.data.msg)
        })
    }
  }
}
</script>

<style scoped>
.mobile-content {
  height: 40px;
  margin-left: 20px;
}

.mobile-content > span {
  color: #1F1F1F;
  font-size: 15px;
}

.inputImg {
  display: none;
}

.box {
  background-color: #F5F5F5;
}

/* 标题 */
.title {
  background-image: linear-gradient(to bottom, #7ac91b 35%, #f5f5f5 0);
  font-weight: bold;
}

.title .title_fan {
  color: #fff;
  font-size: 14px;
  padding: 15px;
}

/* 会员 */
.vip_info {
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  color: #fff;
}

.vip_info img {
  width: 90px;
}

/* 输入 提示 */
.title_cen {
  margin: 15px;
  padding: 15px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 5px 5px 5px #ccc;
  color: #65BD06;
}

/* card 标题 */
.card_title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}

.card_title div {
  margin-left: 13px;
}

/* input 设置 */
.consume_input {
  font-size: 11px;
  margin: 15px 0;
  box-shadow: 0 0 5px #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.consume_input input {
  width: 96%;
  outline: none;
  border: none;
  height: 40px;
  padding: 0 2%;
  font-size: 11px;
}

/* 第一个 提示文字颜色 */
.consume_input_one input::-webkit-input-placeholder {
  color: #67C41D;
}

/* input 框 附带其他 文字 img 等 */
.consume_input_lia {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

/* 电子邮件 */
.consume_input_rimg img {
  width: 12px;
}

/* card 文字 */
.title_cen_size {
  font-size: 12px;
  color: #333333;
}

.title_cen_size > div {
  margin: 10px 0;
}

.title_cen_size > div:nth-child(2) {
  color: #67C41D;
  text-decoration: underline;
}

.title_cen_size > div:nth-child(4) {
  color: #FFB300;
  text-decoration: underline;
}

.title_cen_size > div:nth-child(5) {
  font-size: 11px;
  color: #999999;
}

/* 关联账户 */
.relevance {
  margin: 15px;
  font-size: 14px;
}

.transfer_card div {
  background-color: #fff;
  padding: 10px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 3px 5px #ccc;
}

.transfer_card img {
  width: 25px;
  border-radius: 5px;
  margin-right: 10px;
}

/* 退出 */
.exit {
  background-image: linear-gradient(to bottom, #FF5555, #FF2626);
  margin: 40px;
  padding: 16px;
  color: #FFFFFF;
  text-align: center;
  border-radius: 10px;
}
</style>
